import React from 'react';
import {CommentOutlined, CompassOutlined, QuestionCircleOutlined, SyncOutlined} from '@ant-design/icons';
import {FloatButton} from 'antd';

const floatButtonsGap: number = 45;
const FloatButtonGroupAll: React.FC = () => (
  <>
    {/*new group*/}
    <FloatButton.Group shape="circle">
      <FloatButton/>
      <FloatButton icon={<SyncOutlined/>}/>
      <FloatButton icon={<CommentOutlined/>}/>
      <FloatButton icon={<QuestionCircleOutlined/>}/>
      <FloatButton.BackTop visibilityHeight={0}/>
    </FloatButton.Group>
    {/**/}
    <FloatButton.Group shape="square" style={{right: 24 + floatButtonsGap}}>
      <FloatButton badge={{count: 111, overflowCount: 100}}/>
      <FloatButton badge={{count: 5}} icon={<SyncOutlined/>}/>
      <FloatButton icon={<CommentOutlined/>} badge={{dot: true}}/>
      <FloatButton badge={{count: 111, color: 'green'}} icon={<QuestionCircleOutlined/>} href="https://ant.design/index-cn" tooltip={<div>ant.design</div>}/>
      <FloatButton.BackTop visibilityHeight={0}/>
    </FloatButton.Group>
    {/**/}
    <FloatButton.Group shape="square" style={{right: 24 + floatButtonsGap * 2}}>
      <FloatButton/>
      <FloatButton icon={<SyncOutlined/>}/>
      <FloatButton icon={<CommentOutlined/>}/>
      <FloatButton icon={<QuestionCircleOutlined/>}/>
      <FloatButton.BackTop visibilityHeight={0}/>
    </FloatButton.Group>
    {/* another group */}
    <FloatButton.Group trigger="click" type="primary" style={{right: 24 + floatButtonsGap * 3}} icon={<CompassOutlined/>}>
      <FloatButton/>
      <FloatButton icon={<SyncOutlined/>}/>
      <FloatButton icon={<CommentOutlined/>}/>
      <FloatButton icon={<QuestionCircleOutlined/>}/>
      <FloatButton.BackTop visibilityHeight={0}/>
    </FloatButton.Group>
    {/**/}
    <FloatButton.Group trigger="hover" type="primary" shape={"square"} style={{right: 24 + floatButtonsGap * 4}} icon={<CompassOutlined spin/>}>
      <FloatButton/>
      <FloatButton icon={<SyncOutlined/>}/>
      <FloatButton icon={<CommentOutlined/>}/>
      <FloatButton icon={<QuestionCircleOutlined/>}/>
      <FloatButton.BackTop visibilityHeight={0}/>
    </FloatButton.Group>
  </>
);

export default FloatButtonGroupAll;
